<template>
	<view class="addressChange">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="0" prop="receiver_name"><u-input v-model="form.receiver_name" placeholder="请输入收货人姓名" /></u-form-item>
				<u-form-item label-width="0" prop="receiver_phone"><u-input v-model="form.receiver_phone" placeholder="请输入手机号码" /></u-form-item>
				<u-form-item label-width="0" prop="area"><u-input type="select" v-model="form.area" placeholder="请选择所在区域" @click="pickerShowEvent" /></u-form-item>
				<u-form-item label-width="0" prop="detail">
					<view class="flex_space_b">
						<u-input class="flex1" v-model="form.detail" placeholder="请输入详细地址" />
						<view class="iconBox" @click="chooseLocation">
							<u-icon name="map-fill" color="#999" size="24"></u-icon>
							<text class="text">定位</text>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="intelligent mTop2">
		    <view class="title">智能填写</view>
		    <textarea v-model="inputAddress" placeholder="粘贴地址信息，可自动识别并填写，能快速识别你的信息" />
		    <view class="btnBox mTop2">
				<button class="remove" size="mini" @click="clearInputAddress">清除</button>
				<button class="confirm" size="mini" @click="discernInputAddress">识别</button>
		    </view>
		  </view>
		
		<view class="agreement flex_space_b mTop2">
			<!-- <u-checkbox v-model="form.default" active-color="#fe0000">设为默认地址</u-checkbox> -->
			<view class="label">设为默认地址</view>
			<u-switch v-model="form.is_default" size="40" @change="switchChange" :active-value="1" :inactive-value="0" active-color="#22ac38"></u-switch>
		</view>
		
		<view class="delete mTop2 redText" v-if="deleteChange" @tap="deleteEvent">删除收货地址</view>
		
		<view class="NewAddress">
			<button class="btn" type="default" @tap="newAddress">确认</button>
		</view>
		
		<u-picker mode="region" ref="uPicker" :default-region="region" v-model="pickerShow" @confirm="selectArea" />
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	import AddressParse from '@/common/address-parse/parse'
	
	export default {
		data() {
			return {
				form: {
					receiver_name: '',
					receiver_phone: '',
					province: '',
					city: '',
					unit: '',
					area: '',
					detail: '',
					is_default: 1
				},
				inputAddress: '',
				rules: {
					receiver_name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						}
					],
					receiver_phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: 'blur',
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: 'blur',
						}
					],
					area: [
						{
							required: true,
							message: '请选择区域',
							trigger: 'blur',
						}
					],
					detail: [
						{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur',
						}
					]
				},
				pickerShow: false,
				deleteChange: false,
				region:[]
			}
		},
		methods: {
			chooseLocation () {
				uni.chooseLocation({
					success: (res) => {
						this.AddressParse(res.address)
				    }
				});
			},
			clearInputAddress () {
				this.$nextTick(() => {
					this.inputAddress = '';
				})
			},
			discernInputAddress () {
				this.AddressParse(this.inputAddress)
			},
			AddressParse (text) {
				const [result] = AddressParse.parse(text)
				
				this.form.area = result.province + ' ' + result.city + ' ' + result.area;
				this.form.province = result.province;
				this.form.city = result.city;
				this.form.unit = result.area;
				this.form.detail = result.details;
				this.region = [result.province, result.city, result.area];
			},
			selectArea: function (e) {
				this.form.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				this.form.province = e.province.label;
				this.form.city = e.city.label;
				this.form.unit = e.area.label;
				this.region = [e.province.label,e.city.label,e.area.label]
			},
			newAddress: function () {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(that.form.id){
							// 编辑
							util.requestPost(
							  'api.php/user/editShippingAddress',
							  that.form,
							  function(res){
								uni.navigateBack();
							  },
							  true
							);
						}else{
							// 新增
							util.requestPost(
							  'api.php/user/insertShippingAddress',
							  that.form,
							  function(res){
								uni.navigateBack();
							  },
							  true
							);
						}
					}
				});
			},
			pickerShowEvent: function () {
				this.pickerShow = true
			},
			// 删除收货地址
			deleteEvent () {
				let that = this;
				uni.showModal({
				  content: '确认要删除该地址吗？',
				  success (res) {
					if (res.confirm) {
					  util.requestPost(
						'api.php/user/delShippingAddress',
						{id:that.form.id},
						function(res){
						  wx.navigateBack();
						},
						true
					  );
					}
				  }
				})
			},
			switchChange (item) {
				this.form.is_default = item;
			}
		},
		onLoad (options) {
			if (options.address_detail) {
				this.form = JSON.parse(options.address_detail);
				this.form.is_default = Boolean(Number(this.form.is_default))
				this.region = [this.form.province,this.form.city,this.form.unit];
				this.deleteChange = true
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss">
.addressChange{
	background-color: #f5f5f5;
	min-height: 100%;
	height: auto;
	overflow: hidden;
}
.form {
	padding: 0 32rpx;
	background-color: #FFFFFF;
	.iconBox {
		.text {
			color: #999999;
			font-size: 24rpx;
			margin-left: 4rpx;
		}
	}
}

.intelligent {
	padding: 20rpx 32rpx;
	background-color: #ffffff;
	.title {
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	textarea {
		background-color: #f6f6f6;
		width: 100%;
		border-radius: 12rpx;
		height: 160rpx;
		font-size: 28rpx;
		padding: 20rpx;
		box-sizing:border-box;
	}
	.btnBox {
		display: flex;
		justify-content: flex-end;
		button {
			margin: 0;
			width: auto;
			font-weight: 500;
			font-size: 28rpx;
			padding: 8rpx 40rpx;
			line-height: 42rpx;
			&::after {
				border: none;
			}
		}
		.remove{
			color: #333333;
			background-color: #ddd;
		}
		.confirm{
			color: #ffffff;
			margin-left: 20rpx;
			background-color: var(--primaryColor);
		}
	}
}

.agreement {
	background-color: #FFFFFF;
	padding: 20rpx 32rpx;
}
.delete {
	background-color: #FFFFFF;
	padding: 20rpx 32rpx;
}
.NewAddress {
	position: fixed;
	bottom: 0;
	left: 0;
	width:750rpx;
	height:102rpx;
	padding: 0 32rpx;
	background:rgba(255,255,255,1);
	box-shadow:0px 3px 14px 0px rgba(0, 0, 0, 0.09);
	display: flex;
	align-items: center;
}
.NewAddress .btn {
	width: 100%;
	height:80rpx;
	font-size: 32rpx;
	background: var(--primaryColor);
	box-shadow:0px 3px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius:40rpx;
	line-height: 80rpx;
	color: #FFFFFF;
}
</style>
